﻿
@{
    ViewData["Title"] = "会员管理-所有会员-编辑会员";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.CurrentMenuP = "Members";
    ViewBag.CurrentMenu = "Members/List";
}
<div class="edit-page-wrapper">
    <div class="row">
        <div class="col-12">
            <form class="form-horizontal" id="frmSubmit" method="post" enctype="multipart/form-data">
                <div class="card">
                    <div class="card-header d-flex p-0">
                        <ul class="nav nav-pills p-2">
                            <li class="nav-item">
                                <a class="nav-link active" href="#basicInfo" data-toggle="tab">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#detailInfo" data-toggle="tab">登录密码</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#seoInfo" data-toggle="tab">交易密码</a>
                            </li>
                        </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content p-0">
                            <!-- Morris chart - Sales -->
                            <div class="chart tab-pane active" id="basicInfo">
                                <div class="form-group">
                                    <div class="row">
                                        <label for="UserName" class="col-form-label col-md-1">用户名:</label>
                                        <input type="text" class="form-control col-md-5" name="UserName" id="UserName" placeholder="请输入用户名">
                                        <span class="help-block">不可为空，最多255个字符</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="GradeId" class="col-form-label col-1">会员等级:</label>
                                        <select class="form-control select2" style="width: 50%;" name="GradeId" id="GradeId">
                                            <option value="">==请选择会员等级==</option>
                                        </select>
                                        <span class="help-block">*请选择会员等级</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Email" class="col-form-label col-md-1">Email:</label>
                                        <input type="text" class="form-control col-md-5" name="Email" id="Email" placeholder="1-256个字符以内">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="NickName" class="col-form-label col-1">昵称:</label>
                                        <input type="text" class="form-control col-5" name="NickName" id="NickName" placeholder="请输入昵称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="RealName" class="col-form-label col-1">真实姓名:</label>
                                        <input type="text" class="form-control col-5" name="RealName" id="RealName" placeholder="请输入真实姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="IdentityCard" class="col-form-label col-1">身份证号:</label>
                                        <input type="number" class="form-control col-5" name="IdentityCard" id="IdentityCard" placeholder="请输入身份证号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Picture" class="col-form-label col-1">会员图像:</label>
                                        <div class="input-group col-5">
                                            <input type="text" class="form-control upload-path" name="Picture" id="Picture">
                                            <button type="button" id="j_upload_img_btn">选择图片</button>
                                            <ul id="upload_img_wrap"></ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="ImgUrlPic" class="col-form-label col-1"></label>
                                        <div class="input-group col-5">
                                            <img src="..." alt="" id="ImgUrlPic" class="img-rounded" width="100" height="100" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Gender" class="col-form-label col-md-1">性别:</label>
                                        <select class="form-control select2" style="width: 50%;" name="Gender" id="Gender">
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="BirthDate" class="col-form-label col-md-1">生日:</label>
                                        <div class="input-group col-md-5">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                            </div>
                                            <input type="text" class="form-control" name="BirthDate" id="BirthDate" placeholder="请输入开始时间">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chart tab-pane" id="detailInfo" style="position: relative; ">
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Password" class="col-form-label col-1">新登录密码:</label>
                                        <input type="password" class="form-control col-5" name="Password" id="Password" placeholder="填写新的登录密码">
                                        <span class="help-block">0-20个字符，区分大小写</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="PassWordCompare" class="col-form-label col-1">再输入一次:</label>
                                        <input type="password" class="form-control col-5" name="PassWordCompare" id="PassWordCompare" placeholder="请输入来源">
                                        <span class="help-block">0-20个字符，区分大小写</span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart tab-pane" id="seoInfo" style="position: relative; ">
                                <div class="form-group">
                                    <div class="row">
                                        <label for="TradePassword" class="col-form-label col-1">新交易密码:</label>
                                        <input type="password" class="form-control col-5" name="TradePassword" id="TradePassword" placeholder="填写新交易密码">
                                        <span class="help-block">0-20个字符，区分大小写</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="TradePasswordCompare" class="col-form-label col-1">再输入一次:</label>
                                        <input type="password" class="form-control col-5" name="TradePasswordCompare" id="TradePasswordCompare" placeholder="重复输入一次">
                                        <span class="help-block">0-20个字符，区分大小写</span>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" id="Id" name="Id" value="@ViewData["Id"] " />
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary btnSave" id="btnSaveOK"><i class="fa fa-save"></i>保存</button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnSavefather"><i class="fa fa-close"></i>返回</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<textarea id="uploadEditor" style="display: none;"></textarea>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/datepicker//locales/bootstrap-datepicker.zh-CN.js"></script>
<link href="~/lib/datepicker/datepicker3.css" />

<script type="text/javascript">
    // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
    var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled: false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled: true,
        toolbars: [["insertimage", "attachment"]]
    });

    // 监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
    });
    // 自定义按钮绑定触发多图上传和上传附件对话框事件
    document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };
    // 多图上传动作
    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        $("#Picture").val(result[0].src);
        $("#ImgUrlPic").attr("src", result[0].src);
        //for (var i in result) {
        //    imageHtml += '<li><img src="' + result[i].src + '" alt="' + result[i].alt + '" height="150"></li>';
        //}
        //document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }
</script>
<!-- page script -->
<script>
    $(function () {
        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].flat-red').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal',
        })
        // $("#myEditorImage").InitUploader({ sendurl: "/api/UEditor", swf: "~/lib/webuploader/uploader.swf" });

        $("#BirthDate").datepicker({
            format: 'yyyy-mm-dd',
            language:"zh-CN",
            todayBtn: true,
            todayHighlight: true,
        });
        InitDictItem();
        BindEditInfo();
        BindSaveEvent();
    });
    //初始化数据字典
    function InitDictItem() {
        BindSelect2("GradeId", "/Shop/MemberGrades/GetAll");
    }
    //绑定编辑详细信息的方法
    function BindEditInfo() {
        var ID = $("#Id").val();
        if (ID.trim() != "") {
            //首先用户发送一个异步请求去后台实现方法
            $.getJSON("/Shop/Members/GetById?r=" + Math.random() + "&id=" + ID, function (info) {
                //赋值有几种方式：.datebox('setValue', info.Birthday);.combobox('setValue', info.Status);.val(info.Name);
                $("#Id").val(info.ResData.Id);
                $("#frmSubmit").formSerialize(info.ResData);
                UE.getEditor('Description').setContent(info.ResData.Description);
                $("#ImgUrlPic").attr("src", info.ResData.Picture);
            });
        }
    }
    //绑定保存按钮的事件
    function BindSaveEvent() {
        $("#btnSaveOK").click(function () {
            $("#frmSubmit").validate({
                rules: {
                    UserName: {
                        required: true,
                        minlength: 2
                    },
                },
                messages: {
                    UserName: {
                        required: "请输入用户名",
                        minlength: "用户名至少2个字符"
                    },
                },
                errorClass: 'help-block help-block-error',
                focusInvalid: true,
                //unhighlight: function (element, errorClass, validClass) { //验证通过
                //    $(element).tooltip('destroy').removeClass(errorClass);
                //},
                highlight: function (element) {//验证未通过
                    $(element).closest('.form-group').addClass('has-error');
                },
                success: function (label, element) {
                    $(element).closest('.form-group').removeClass('has-error');
                    //label.remove();
                    $(element).attr("title", "").tooltip("hide");
                    //alert(element);
                },
                errorPlacement: function (error, element) {
                    //element.parent('div').append(error);
                    if ($(element).next("div").hasClass("tooltip")) {
                        $(element).attr("data-original-title", $(error).text()).tooltip("show");
                    } else {
                        $(element).attr("title", $(error).text()).tooltip("show");
                    }
                },
                submitHandler: function (form) {
                    var postData = {
                        "Id": $("#Id").val(),
                        "UserName": $("#UserName").val(),
                        "GradeId": $("#GradeId").val(),
                        "Password": $("#Password").val(),
                        "Email": $("#Email").val(),
                        "NickName": $("#NickName").val(),
                        "RealName": $("#RealName").val(),
                        "IdentityCard": $("#IdentityCard").val(),
                        "Gender": $("#Gender option:selected").val(),
                        "BirthDate": $("#BirthDate").val(),
                        "Picture": $("#Picture").val(),
                        "IsOpenBalance": $("#IsOpenBalance").is(':checked'),
                    };
                    var keyValue = $("#Id").val().trim();
                    var reqUrl = "/Shop/Members/Insert";
                    if (keyValue != "" && keyValue != null && keyValue != "null") {
                        reqUrl = "/Shop/Members/Update?id=" + keyValue;
                    }
                    $.ajax({
                        url: reqUrl,
                        data: postData,
                        dataType: 'json',//服务器返回json格式数据
                        type: 'post',//HTTP请求类型
                        timeout: 100000,//超时时间设置为10秒；
                        success: function (data) {
                            //服务器返回响应，根据响应结果，分析是否登录成功；
                            if (data.Success) {
                                $("#frmSubmit")[0].reset();
                                toastr.success("操作成功");
                                setTimeout(function () {
                                    window.location.href = "/Shop/Members/Index"
                                }, 1500);
                            } else {
                                toastr.warning("操作失败：" + data.ErrMsg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            toastr.warning("操作失败：" + errorThrown);
                        }
                    });
                }
            });
        });

        $("#btnSavefather").click(function () {
            window.location = "/Shop/Members/Index";
        });
    }

</script>
